<template>
  <div class="" id="recruitdetails-home" :style="{minHeight: height+'px'}">
    <el-container style="justify-content: center; margin-bottom: 100px;">
      <el-header class="recruitdetails-home-header">
        <div style="" 
             class="d-flex justify-content-between align-items-center home-details">
          <div>
            <h2 id="recruitdetails-position" class="font-weight-bold mb-2 mt-0">{{position.positionName}}</h2>
            <p style="font-size: 18px;"><span style="color: #cb5e29;font-weight: bold;">
               {{position.salary}}</span>&nbsp;&nbsp;/&nbsp;&nbsp;
               {{position.workYear}}&nbsp;&nbsp;/&nbsp;&nbsp;
               {{getEducation(position.education)}}&nbsp;&nbsp;/&nbsp;&nbsp;
               {{getNature(position.nature)}}</p>
            <p class="mb-0" style="font-size: 14px;">发布于&nbsp;&nbsp;{{$formatYMD(position.ctime)}}</p>
          </div>
          <el-button type="primary" @click="submitResume()" :disabled= "isDelivery === 'YES'" v-if="!isEc" :loading="isSubmit">
            {{isDelivery === 'YES' ? "已投递" : "投递简历"}}
          </el-button>
        </div>
        
      </el-header>
      <el-container>
        <div class="" style="width: 880px;margin-right: 70px;">
          <h5 class="mb-3">职位描述:</h5>
          <div class="text-muted" v-html="$replaceEnter(position.description)"></div>
          <h5 class="mt-5 mb-3">公司地址:</h5>
          <div class="text-muted">{{position.workCity}} {{position.workAddress}}</div>
        </div>
        <el-aside width="310px" class="" title="点击查看公司信息" style="cursor: pointer;">
          <div @click="seeEC()">
            <div style="width: 100px;margin-left: 50%;transform: translateX(-50%);">
              <div class="zoomImage-70" :style="{backgroundImage: 'url(' + position.companyLogo + ')'}"></div>
            </div>
            <h5 class="text-center my-3">{{position.companyName}}</h5>
            <div class="text-muted" v-html="$replaceEnter(position.companySummary)"  ></div>
          </div>
          
        </el-aside>
      </el-container>
    </el-container>
    <back-top></back-top>
  </div>
</template>
<script>

let gen = async function (self, id) {
  let res = await axios.post('/mscs/position/findPositionData', self.$paramsConvert({positionId: id}))
  self.position = Object.assign({}, self.position, res.data.data)
  self.getIsDelivery()
}
export default {
  name: 'recruitdetails',
  title: '招聘详情',
  data() {
    return {
      position: {},
      isDelivery: "NO",
      isSubmit: false
    }
  },
  methods: {
    submitResume () {
      if (!this.$store.state.user.isLogin) {
        this.$openLogin()
      } else {
        this.isSubmit = true
        axios.post('/mscs/resume/applyResumes', this.$paramsConvert(
          { userId: this.$store.state.user.user.user.userId, positionId: this.position.positionId }
          )).then(res => {
          if (res.data.code === 1) {
            this.$message({
              showClose: true,
              message: '简历投递成功',
              type: 'success'
            })
            this.isDelivery = 'YES'
          } else {
            console.log('res', res);
            if (res.data.data.message.includes("简历信息未完善")) {
              this.$confirm('简历尚未完善，请先完善您的简历', '提示', {
                showCancelButton: false,
                confirmButtonText: '完善简历',
                type: 'warning'
              }).then(() => {
                this.$router.push({name: "curriculumvitae"})
              })
            } else {
              this.$codeError(res)
            }
          }
        }).catch(error => {
          this.$catchError(error)
        }).finally(() => {
          this.isSubmit =false
        })
      }
    },
    // POST /mscs/position/findResumeIsDelivery
    getIsDelivery () {
      if (this.isLogin) {
        axios.post('/mscs/position/findResumeIsDelivery', this.$paramsConvert(
          {userId: this.$store.state.user.user.user.userId, positionId: this.position.positionId}
        )).then(res => {
          if (res.data.code === 1) {
            this.isDelivery = res.data.data
          } else {
            this.$codeError(res)
          }
        }).catch(error => {
          this.$catchError(error)
        })
      }
    },
    getEducation (str) {
      let educationes = [
        {label: '博士', value: 'DOCTOR'},
        {label: '硕士', value: 'MASTER'},
        {label: '本科', value: 'BACHELOR'},
        {label: '大专', value: 'COLLEGE'},
        {label: '中技', value: 'TECHNICAL_SCHOOL'},
        {label: '中专', value: 'TECHNICAL_SECONDARY_SCHOOL'},
        {label: '高中以下', value: 'HIGH_SCHOOL'}
      ]
      for (let i = 0; i < educationes.length; i++) {
        if (str === educationes[i].value) {
          return educationes[i].label
        }
      }
    },
    getNature (str) {
      let natures = [
        {label: '全职', value: 'FULL_TIME'},
        {label: '兼职', value: 'PART_TIME'},
        {label: '实习', value: 'PRACTICE'}
      ]
      for (let i = 0; i < natures.length; i++) {
        if (str === natures[i].value) {
          return natures[i].label
        }
      }
    },
    seeEC () {
      const {href} = this.$router.resolve({
        name: 'echome',
        params: {id: this.$compileStr(this.position.enterpriseId)}
      })
      window.open(href, '_blank')
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      gen(vm, vm.$uncompileStr(to.params.id)).catch(error => {
        vm.$catchError(error)
      })
    })
  },
  watch: {
    '$store.state.user.token' (val) {
      if (val) {
        this.getIsDelivery()
      }
    }
  },
   computed: {
     height () {
       let height = this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
       return height
     },
     isLogin () {
       return this.$store.state.user.isLogin
     },
    //  企业用户是不能投递简历的，只能查看
     isEc () {
       if (this.$store.state.user.user) {
         let type = this.$store.state.user.user.user.userType
         return type === 'CMEMBER' || type === 'COMPANY'
       }
       return false
     }
  },
}
</script>
<style lang="scss">
  #recruitdetails-home {
    .el-container {
      justify-content: center;
    }
  }

  .recruitdetails-home-header {
    height: 200px!important;
    background-color: #edefea;
    margin-bottom: 50px;
    .home-details {
      width: 1260px; 
      margin-top: 50px;
      margin-left: 50%;
      transform: translateX(-50%);
      button {
        font-size: 25px;
        padding: 20px 70px;
      }
    }
  }
</style>